<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>T1_商机授权</title>
    <link rel="stylesheet" href="../elementui-2.15.6/element-icons.ttf">
    <link rel="stylesheet" href="../elementui-2.15.6/element-icons.woff">
    <link rel="stylesheet" href="../elementui-2.15.6/icon.css">
    <link rel="stylesheet" href="../elementui-2.15.6/elmentui.css">
    <link rel="stylesheet" href="../common.css">
    <link rel="stylesheet" href="./scss/index.css">
    <script src='../vue-2.6.12.js'></script>
    <script src='../elementui-2.15.6/elementui.js'></script>
</head>

<body>
    <div class="zl-business-auth" id="zl-business-auth-box-t1">
        <div class="zl-business-auth-main" v-show="!showDetail && !showAuth">
            <div class="zl-business-auth-search">
                <el-button type="primary" size="small" icon="el-icon-position" @click="openAuthDialog(2)">申请商机授权
                </el-button>
                <el-button type="primary" size="small" icon="el-icon-download" @click="download">下载证书</el-button>
            </div>
            <div class="zl-business-auth-table">
                <el-table :data="tableData" style="width: 200%" ref="multipleTable" @selection-change="selectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <template v-for="(item, index) in tableHeader">
                        <el-table-column :prop="item.key" :label="item.label" v-if="item.key !== 'op'" :key="index"
                            :min-width="item.minWidth" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span v-if="item.slot">
                                    <el-tag v-if="item.label=== '报备状态'" size="small" :type="scope.row[item.key] === 1 ? 'success': 'warning'">{{scope.row[item.key] === 1 ? '已报备': '未报备'}}</el-tag>
                                    <el-tag v-if="item.label=== '授权状态'" size="small" :type="scope.row[item.key] === '已授权' ? 'success': 'warning'">{{scope.row[item.key]}}</el-tag>
                                    
                                    <!-- {{scope.row[item.key] === 1 ? '已报备': '未报备'}} -->
                                </span>
                                <span v-else="item.slot">{{scope.row[item.key]}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column v-else label="操作" width="180">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="openDetailDialog(scope.row)">查看</el-button>
                                <el-button type="text" size="small" @click="openAuthDialog(1, scope.row)">申请授权
                                </el-button>
                                <el-button type="text" size="small" @click="revoke">撤回</el-button>
                            </template>
                        </el-table-column>
                    </template>
                </el-table>
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageData.currentPage" :page-sizes="[10, 20, 30, 40, 50]"
                    :page-size="pageData.pageSize" layout="total, prev, pager, next, sizes" :total="pageData.total">
                </el-pagination>
            </div>
        </div>
        <!-- 申请授权、查看详情弹框 -->
        <div class="zl-business-auth-addOrEditBox" v-show="showAuth">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>申请授权</span>
                    <el-button style="float: right; padding: 3px 0;font-size:20px" type="text" icon="el-icon-close"
                        @click="closed(1)"></el-button>
                </div>
                <div class="box-card-form">
                    <!-- 申请授权 -->
                    <el-form ref="authForm" :model="authForm" :label-position="'top'" size="small"
                        label-width="80px">
                        <el-form-item label="授权书编号">
                            <el-input v-model="authForm.sqsbh"></el-input>
                        </el-form-item>
                        <el-form-item class="auth-type" label="授权类型" required>
                            <el-radio-group v-model="authForm.sqlx">
                                <el-radio :label="1">唯一性</el-radio>
                                <el-radio :label="2">非唯一性</el-radio>
                            </el-radio-group>
                            <!-- <el-input type="file"> -->
                            <el-upload v-show="authForm.sqlx === 1" class="upload-demo"
                                action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="3">
                                <el-button size="mini" type="primary" icon="el-icon-upload2">上传文件</el-button>
                                <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                            </el-upload>
                        </el-form-item>

                        <el-form-item label="被授权单位的名称" required>
                            <el-input v-model="authForm.bsqdwmc" :disabled="currentType === 1"></el-input>
                        </el-form-item>
                        <el-form-item label="被授权单位的办公地址">
                            <el-input v-model="authForm.bsqdwbgdz" :disabled="currentType === 1"></el-input>
                        </el-form-item>
                        <el-form-item label="被授权单位的联系人">
                            <el-input v-model="authForm.bsqdwlxr" :disabled="currentType === 1"></el-input>
                        </el-form-item>
                        <el-form-item label="被授权单位的联系人电话">
                            <el-input v-model="authForm.bsqdwlxrdh" :disabled="currentType === 1"></el-input>
                        </el-form-item>
                        <el-form-item label="被授权单位的联系人传真">
                            <el-input v-model="authForm.bsqdwlxrcz" :disabled="currentType === 1"></el-input>
                        </el-form-item>
                        <el-form-item label="招标单位的名称" required>
                            <el-input v-model="authForm.zbdwmc"></el-input>
                        </el-form-item>

                        <el-form-item label="生效商机名称" required v-if="currentType === 1">
                            <el-input v-model="authForm.sxsjmc" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="招标项目名称" required>
                            <el-input v-model="authForm.zbxmmc"></el-input>
                        </el-form-item>

                        <el-form-item label="招标项目的编号" required>
                            <el-input v-model="authForm.zbxmbh"></el-input>
                        </el-form-item>
                        <el-form-item label="产品型号" required>
                            <el-input v-model="authForm.cpxh"></el-input>
                        </el-form-item>

                        <el-form-item label="所属行业（请务必填写）" required>
                            <el-select v-model="authForm.sshy" placeholder="请选择">
                                <el-option v-for="item in sshyList" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <!-- <el-input v-model="authForm.sshy"></el-input> -->
                        </el-form-item>
                        <el-form-item label="授权有效期">
                            <!-- <el-input v-model="authForm.sqyxq"></el-input> -->
                            <el-date-picker v-model="authForm.sqyxq" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="授权格式" required>
                            <el-radio-group v-model="authForm.sqgs">
                                <el-radio :label="1">按山特标准格式</el-radio>
                                <el-radio :label="0">按招标单位格式（附表）</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="授权书传递方式" required>
                            <el-radio-group v-model="authForm.sqwcdfs">
                                <el-radio :label="1">电子档</el-radio>
                                <el-radio :label="2">快递 (请注明快递地址）</el-radio>
                                <el-radio :label="3">其他</el-radio>
                            </el-radio-group>
                            <!-- <el-input v-model="authForm.name"></el-input> -->
                        </el-form-item>
                        <el-form-item label="Email地址" required>
                            <el-input v-model="authForm.email"></el-input>
                        </el-form-item>
                        <el-form-item label="收件公司" :required="authForm.sqwcdfs === 2">
                            <el-input v-model="authForm.sjgs" :disabled="authForm.sqwcdfs !== 2"></el-input>
                        </el-form-item>
                        <el-form-item label="收件公司联系人/电话/地址" :required="authForm.sqwcdfs === 2">
                            <el-input v-model="authForm.sjgslxr" :disabled="authForm.sqwcdfs !== 2"
                                placeholder="勾选快递后，需要填写当前行信息">
                            </el-input>
                        </el-form-item>

                        <el-form-item label="申请单位" required>
                            <el-input v-model="authForm.sqdw"></el-input>
                        </el-form-item>
                        <el-form-item label="申请人" required>
                            <el-input v-model="authForm.sqr"></el-input>
                        </el-form-item>


                        <el-form-item label="申请人电话" required>
                            <el-input v-model="authForm.sqrdh"></el-input>
                        </el-form-item>
                        <el-form-item label="申请日期" required>
                            <el-date-picker v-model="authForm.sqrq" type="date" placeholder="选择日期">
                            </el-date-picker>
                            <!-- <el-input v-model="authForm.desc"></el-input> -->
                        </el-form-item>

                        <el-form-item label="非标资质文件" required>
                            <!-- <el-input v-model="authForm.desc"></el-input> -->
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
                                :limit="1">
                                <el-button size="mini" type="primary" icon="el-icon-upload2">上传文件</el-button>
                                <div slot="tip" class="el-upload__tip">支持扩展名：.rar .zip .doc .docx .pdf .jpg...</div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="标准资质文件" required>
                            <!-- <el-input v-model="authForm.desc"></el-input> -->
                            <el-checkbox-group v-model="authForm.bzzzwj">
                                <el-checkbox v-for="item in certificateList" :label="item.value" :key="item.value">
                                    {{item.label}}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>

                    </el-form>
                    <div class="goods-list goods-list-add" v-if="currentType === 2">
                        <div class="goods-list-add-form">
                            <el-form :model="addGoodsForm" :label-position="'top'" size="small">
                                <el-form-item label="产品线" required>
                                    <el-select v-model="addGoodsForm.cpx" placeholder="请选择">
                                        <el-option v-for="item in cpxList" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="产品子系列" required>
                                    <el-select v-model="addGoodsForm.cpzxl" placeholder="请选择">
                                        <el-option v-for="item in cpzxlList" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="产品系列" required>
                                    <el-select v-model="addGoodsForm.cpxl" placeholder="请选择">
                                        <el-option v-for="item in cpxlList" :key="item.value" :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="预估数量" required>
                                    <el-input type="number" v-model="addGoodsForm.ygsl" placeholder=""></el-input>
                                </el-form-item>
                                <el-form-item label="产品名称" required>
                                    <el-input v-model="addGoodsForm.cpmc" placeholder=""></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="goods-list-title">
                            <span class="title-spot">
                                <em class="spot"></em>订单产品清单
                            </span>
                            <el-button type="primary" size="mini" @click="addGoods">加入</el-button>
                        </div>
                        <div class="goods-list-table">
                            <el-table :data="goodsData" border style="width: 100%" @cell-click="handleCellClick">
                                <el-table-column prop="goodsname" label="产品" show-overflow-tooltip width="400">
                                </el-table-column>
                                <el-table-column prop="goodsCode" label="料号" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="price" label="单价" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="number" label="数量" show-overflow-tooltip>
                                    <template scope="scope">
                                        <el-input v-if="scope.row.isEdit" size="small"
                                            @keyup.native.enter="handleInputBlur(scope)" @blur="handleInputBlur(scope)"
                                            v-model="scope.row.number" v-model="scope.row.number"></el-input>
                                        <span v-else>{{scope.row.number}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="op" label="操作" width="100">
                                    <template slot-scope="scope">
                                        <el-button type="text" size="small" @click="deleteList(scope)">删除</el-button>
                                        </el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="goods-list-table-total">
                                <el-form :model="authForm" :label-position="'top'" size="small">
                                    <el-form-item label="预计估值（元）" required>
                                        <el-input v-model="authForm.yjgz" placeholder=""></el-input>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-card-bottom">
                    <el-button size="small" @click="closed(1)" >取消</el-button>
                    <el-button type="primary" @click="onSubmit" size="small" >确认提交</el-button>
                </div>
            </el-card>
        </div>
        <div class="zl-business-auth-addOrEditBox" v-show="showDetail">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>授权详情</span>
                    <el-button style="float: right; padding: 3px 0;font-size:20px" type="text" icon="el-icon-close"
                        @click="closed(2)"></el-button>
                </div>
                <div class="box-card-form">
                    <el-descriptions title="" size="small" direction="vertical" :column="2" border>
                        <template v-for="(item, index) in detailItemList">
                            <template v-if="item.label.indexOf('生效商机名称') > -1">
                                <el-descriptions-item :label="item.label" :key="index" v-if="authForm.bbzt === 1">
                                    {{authForm[item.key]}}</el-descriptions-item>
                            </template>
                            <el-descriptions-item :label="item.label" :key="index" v-else>
                                {{authForm[item.key]}}</el-descriptions-item>
                        </template>
                    </el-descriptions>
                    <div class="goods-list">
                        <div class="goods-list-title"><span class="title-spot">
                                <em class="spot"></em>产品
                            </span></div>
                        <div class="goods-list-table">
                            <el-table :data="goodsData" border style="width: 100%">
                                <el-table-column prop="goodsname" label="产品" show-overflow-tooltip width="400">
                                </el-table-column>
                                <el-table-column prop="goodsCode" label="料号" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="price" label="单价" show-overflow-tooltip></el-table-column>
                                <el-table-column prop="number" label="数量" show-overflow-tooltip></el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="box-card-bottom">
                    <el-button type="primary" size="small" @click="closed(2)">关闭</el-button>
                </div>
            </el-card>
        </div>
    </div>

    <script>
        new Vue({
            el: '#zl-business-auth-box-t1',
            data() {
                return {
                    showAuth: false,
                    showDetail: false,
                    disabledAll: false,
                    disabledParams: false,
                    currentType: 2,
                    tableHeader: [
                        { label: '授权书编号', key: 'booksCode', minWidth: '10%' },
                        { label: '商机编号', key: 'businessCode', minWidth: '10%' },
                        { label: '商机名称', key: 'businessName', minWidth: '10%' },
                        { label: '商机金额', key: 'number', minWidth: '10%' },
                        { label: '报备状态', key: 'reportStatus', minWidth: '10%', slot: true },
                        { label: '被授权单位的名称', key: 'orgname', minWidth: '15%' },
                        { label: '商机报备地址', key: 'address', minWidth: '15%' },
                        { label: '标签', key: 'tags', minWidth: '10%' },
                        { label: '跨区', key: 'isArea', minWidth: '10%' },
                        { label: '所跨区域', key: 'ares', minWidth: '10%' },
                        { label: '授权状态', key: 'state', minWidth: '10%', slot: true  },
                        { label: '操作', key: 'op', width: '180' }
                    ],
                    tableData: [
                        {
                            booksCode: '123456', businessCode: '123456', businessName: 'XXXXX', number: '1000.00', reportStatus: 1, orgname: '嘉兴逸蓝网络科技有限公司',
                            address: '河南省郑州市金水区', tags: '渠道报备', isArea: '是', ares: '浙江', state: '已授权'
                        },
                        {
                            booksCode: '123456', businessCode: '123456', businessName: 'XXXXX', number: '1000.00', reportStatus: 0, orgname: '嘉兴逸蓝网络科技有限公司',
                            address: '河南省郑州市金水区', tags: '渠道报备', isArea: '是', ares: '浙江', state: '已授权'
                        },
                        {
                            booksCode: '123456', businessCode: '123456', businessName: 'XXXXX', number: '1000.00', reportStatus: 1, orgname: '嘉兴逸蓝网络科技有限公司',
                            address: '河南省郑州市金水区', tags: '渠道报备', isArea: '是', ares: '浙江', state: '已授权'
                        }
                    ],
                    pageData: {
                        currentPage: 1,
                        pageSize: 10,
                        total: 0
                    },
                    selectList: [],
                    sshyList: [
                        { label: '电信', value: '1' },
                        { label: '金融', value: '2' },
                        { label: '制造', value: '3' },
                        { label: '政府', value: '4' },
                        { label: '能源', value: '5' },
                        { label: '交通', value: '6' },
                        { label: '教育', value: '7' },
                        { label: '其他', value: '8' },
                    ],
                    authForm: {
                        sqsbh: '',
                        sqlx: 2,
                        bsqdwmc: '',
                        bsqdwbgdz: '',
                        bsqdwlxr: '',
                        bsqdwlxrdh: '',
                        bsqdwlxrcz: '',
                        zbdwmc: '',
                        sxsjmc: '',
                        zbxmmc: '',
                        zbxmbh: '',
                        cpxh: '',
                        sshy: '',
                        sqyxq: '',
                        sqgs: '',
                        sqwcdfs: '',
                        email: '',
                        sjgs: '',
                        sjgslxr: '',
                        sqdw: '',
                        sqr: '',
                        sqrdh: '',
                        sqrq: '',
                        bzzzwj: [],
                        fbzwj: ''
                    },
                    certificateList: [
                        { label: '证书1', value: 1 },
                        { label: '证书2', value: 2 },
                        { label: '证书3', value: 3 },
                        { label: '证书4', value: 4 },
                        { label: '证书5', value: 5 },
                    ],
                    goodsData: [
                        { id: 1, goodsname: 'UPS1', goodsCode: '123456', price: '100', number: 111, isEdit: false },
                        { id: 2, goodsname: 'UPS2', goodsCode: '123456', price: '100', number: 111, isEdit: false },
                    ],
                    cpxList: [
                        { label: 'UPS监控软件或卡', value: 'UPS监控软件或卡' },
                        { label: '一体化解决方案', value: '一体化解决方案' },
                        { label: '三相UPS<100KVA', value: '三相UPS<100KVA' },
                        { label: '三相UPS>100KVA', value: '三相UPS>100KVA' },
                        { label: '单相机UPS', value: '单相机UPS' },
                        { label: '机柜', value: '机柜' },
                        { label: '电池', value: '电池' }
                    ],
                    cpzxlList: [
                        { label: 'WEBPOWER NMC CARD', value: 'WEBPOWER NMC CARD' },
                    ],
                    cpxlList: [
                        { label: '北京', value: '北京' },
                        { label: '重庆', value: '重庆' },
                        { label: '安徽', value: '安徽' },
                        { label: '广州', value: '广州' },
                        { label: '福建', value: '福建' },
                        { label: '河南', value: '河南' },
                    ],
                    addGoodsForm: {
                        cpx: '',
                        cpzxl: '',
                        cpxl: '',
                        ygsl: 1221,
                        cpmc: '测试'
                    },
                    detailItemList: [
                        { label: '授权书编号：', key: 'sqsbh' },
                        { label: '授权类型：', key: 'sqlx' },
                        { label: '被授权单位名称：', key: 'bsqdwmc' },
                        { label: '被授权单位的办公地址：', key: 'bsqdwbgdz' },
                        { label: '被授权单位的联系人：', key: 'bsqdwlxr' },
                        { label: '被授权单位的联系人电话：', key: 'bsqdwlxrdh' },
                        { label: '被授权单位的联系人传真：', key: 'bsqdwlxrcz' },
                        { label: '招标单位的名称：', key: 'zbdwmc' },
                        { label: '生效商机名称：', key: 'sxsjmc' },
                        { label: '招标项目名称：', key: 'zbxmmc' },
                        { label: '招标项目的编号：', key: 'zbxmbh' },
                        { label: '产品型号：', key: 'cpxh' },
                        { label: '所属行业（请务必填写）：', key: 'sshy' },
                        { label: '授权有效期：', key: 'sqyxq' },
                        { label: '授权格式：', key: 'sqgs' },
                        { label: '授权书传递方式：', key: 'sqscdfs' },
                        { label: 'Email地址：', key: 'email' },
                        { label: '收件公司：', key: 'sjgs' },
                        { label: '收件公司联系人/电话/地址：', key: 'sjgslxr' },
                        { label: '申请单位：', key: 'sqdw' },
                        { label: '申请人：', key: 'sqr' },
                        { label: '申请人电话：', key: 'sqrdh' },
                        { label: '申请日期：', key: 'sqrq' },
                        { label: '非标资质文件：', key: 'fbzwj' },
                        { label: '标准资质文件：', key: 'bzzzwj' }
                    ]
                }
            },
            methods: {
                onSubmit() {
                    if (this.currentType === 1) { // 单挑申请授权

                    } else if (this.currentType === 2) { // 顶部申请授权按钮

                    }
                },
                selectionChange(selection) {
                    this.selectList = selection;
                },
                download() {
                    if (!this.selectList.length) {
                        this.$message.warning('请选择已授权的商机进行下载！');
                        return;
                    }
                },
                openAuthDialog(type, data) {
                    this.showAuth = !this.showAuth;
                    this.currentType = type
                    if (type === 1) {
                        this.authForm = {
                            sqsbh: '2017-SC-E-001',
                            sqlx: 1,
                            bsqdwmc: '嘉兴逸蓝网络科技有限公司',
                            bsqdwbgdz: '浙江省嘉兴市南湖区世界贸易中心2幢902',
                            bsqdwlxr: '张三',
                            bsqdwlxrdh: '15037266331',
                            bsqdwlxrcz: '15037266331',
                            zbdwmc: '',
                            sxsjmc: 'XXXXXXXX项目',
                            zbxmmc: '',
                            zbxmbh: '123456',
                            cpxh: '',
                            sshy: '2',
                            sqyxq: '',
                            sqgs: '',
                            sqwcdfs: '',
                            email: '',
                            sjgs: '',
                            sjgslxr: '',
                            sqdw: '',
                            sqr: '',
                            sqrdh: '',
                            sqrq: '',
                            bzzzwj: [3, 4, 5],
                            fbzwj: ''
                        }
                    } else if (type === 2) {
                        for (let key in this.authForm) {
                            this.authForm[key] = ''
                        }
                    }
                },
                openDetailDialog(data) {
                    this.showDetail = !this.showDetail;
                    this.authForm = {
                        bbzt: data.reportStatus,
                        sqsbh: '2017-SC-E-001',
                        sqlx: 1,
                        bsqdwmc: '嘉兴逸蓝网络科技有限公司',
                        bsqdwbgdz: '浙江省嘉兴市南湖区世界贸易中心2幢902',
                        bsqdwlxr: '张三',
                        bsqdwlxrdh: '15037266331',
                        bsqdwlxrcz: '15037266331',
                        zbdwmc: '',
                        sxsjmc: 'XXXXXXXX项目',
                        zbxmmc: '',
                        zbxmbh: '123456',
                        cpxh: '',
                        sshy: '2',
                        sqyxq: '',
                        sqgs: '',
                        sqwcdfs: '',
                        email: '',
                        sjgs: '',
                        sjgslxr: '',
                        sqdw: '',
                        sqr: '',
                        sqrdh: '',
                        sqrq: '',
                        bzzzwj: [3, 4, 5],
                        fbzwj: ''
                    }
                },
                // 撤销
                revoke() {
                    console.log('撤销授权')
                },
                // 关闭弹框
                closed(type) {
                    if (type === 1) {
                        this.showAuth = !this.showAuth;
                        this.currentType = 2
                    } else {
                        this.showDetail = !this.showDetail
                    }

                },
                // 切换每页展示数量
                handleSizeChange(size) {
                    console.log(size)
                },
                // 切换页码
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                },
                //单元格点击后，显示input，并让input 获取焦点
                handleCellClick(row, column, cell, event) {
                    if (column.label === '数量') {
                        this.$set(row, 'isEdit', true)
                    }
                },
                //input框失去焦点事件
                handleInputBlur({ row, column }) {
                    if (column.label === '数量') {
                        this.$set(row, 'isEdit', false)
                    }
                },
                // 添加产品
                addGoods() {
                    let sortGoodsData = JSON.parse(JSON.stringify(this.goodsData))
                    sortGoodsData = sortGoodsData.sort((a, b) => b.id - a.id)
                    this.goodsData.push({
                        id: sortGoodsData[0].id + 1, goodsname: 'UPS' + (sortGoodsData[0].id + 1), goodsCode: '123456', price: '100', number: 111, isEdit: false
                    })
                },
                // 删除
                deleteList({ row, column }) {
                    let deIndex = 0
                    this.goodsData.forEach((element, index) => {
                        if (element.id === row.id) {
                            deIndex = index
                        }
                    });
                    this.goodsData.splice(deIndex, 1)
                }
            }
        })
    </script>
</body>

</html>